<template>
  <div id="selectpatient">
    <header>
      <i @click="goBack()"></i>
      <div>选择患者</div>
      <span @click='addPatient'>新建</span>
    </header>
    <div class='searchbox'>
      <div class='search'>
        <div>
          <input type="text" placeholder="搜索患者" v-model='searchKey'>
        </div>
        <span @click='searchPatient(sentPage)'>搜索</span>
      </div>
    </div>
    <div class='box'>
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :bottom-pull-text="bottomPullText" ref="loadmore" :autoFill="false">
        <ul>
          <div class='mc' v-if="list.length<1">
                    <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
                    <p>暂无数据!</p>
                </div>
          <li v-for='(item,index) in list' :key='index' v-if="list.length>0">
                    <a @click='goNext(item.id,item.name)'>
                       <img src="../../image/bg_touxiang@2x.png" width='43' height='43' alt="">
                       <i class="info">
                        <i>{{item.name}}</i>
                        <i>{{item.sex}}</i>
                        <i>{{item.age}}岁</i>
                       </i>
                        <span>{{item.tele}}</span>
                    
                    </a>
                </li>

        </ul>
      </Loadmore>
    </div>

  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        userid: '',
        // list: [1,2,3,4,5,6,7,8,9],
        list: [],   
        sentPage: {
          page: 1, //分页累加
          query:{
              userid:'',
          }
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        searchKey: '',
        bottomPullText: "", //上拉提示信息
      }
    },
    components: {
      Loadmore
    },
    created() {
      this.getPatientList(this.sentPage);
    },
    methods: {
      //判断入口
      justFrom() {

      },
      // 根据患者名搜索患者
      searchPatient(params) {
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/patient/1?name=" + this.searchKey, params, r => {
          this.totalNum = r.data.records;
          if (this.sentPage.page == 1) {
            this.list = r.data.rows;
          } else {
            this.list = this.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0 && this.sentPage.page > 1) {
            this.$utils._toast("暂无更多数据");
          }

        }, err => {
          console.log(err);
        })
      },
      goBack() {
        const from = this.$route.query.from;
        const name=localStorage.getItem('name');
        if (from == 'patients') {
          this.$router.push({
            name: 'myClinic',
            query:{
            user:JSON.parse(name)
            }
          });
        } else {
          this.$router.back();
        }
      },
      //点击患者根据入口进入下一页
      goNext(pid, pname) {
        const from = this.$route.query.from;
        const from0 = this.$route.query.from0;
        const status = this.$route.query.status;
        if (from == 'patients') {
          this.$router.push({
            name: 'patientDetails',
            query: {
              pid: pid
            }
          });
          
        } 
        // else if (from == 'addNewAppointment') { //新增预约
        //   this.$router.push({
        //     name: from,
        //     query: {
        //         from: from0,
        //       pid: pid,
        //     }
        //   });
        // }
        else if (from == 'addReturnVisit') { //回访
          this.$router.push({
            name: from,
            query: {
              pid: pid,
              status: status
            }
          });
        } else {  //预约
          this.$router.push({
            name: from,
            query: {
              from: from0,
              pid: pid,
              pname:pname
            }
          });
        }
      },
      //新建患者
      addPatient() {
        this.$router.push({
          name: 'addPatient',
          query: {
            status: 'add'
          }
        });
      },
      // 获取患者列表
      getPatientList(params) {
        this.userid = localStorage.getItem("loginMobile");
        this.sentPage.query.userid = localStorage.getItem("loginMobile");
        // this.$api.post(this.$api.baseURLSchool, "selecttype_view/patient/1?name=" + this.searchKey, params, r => {
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/patient/0?userid=" + this.userid, params, r => {
          this.totalNum = r.data.records; //总数据
          if (this.sentPage.page == 1) {
            this.list = r.data.rows;
          } else {
            this.list = this.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0 && this.sentPage.page > 1) {
            this.$utils._toast("暂无更多数据");
          }
          if (this.totalNum == this.list.length) {
            this.allLoaded = true;
          } else {
            this.bottomPullText = '上拉加载下一页';
          }

        }, err => {
          console.log(err);
        })
      },
      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getPatientList(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      }

    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding-top: 40px;
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
    }
  }
  .info{
    display: flex;
    width: 62%;
  }
  .info i{
      width: 35%;
      padding-left: 0px !important;
      text-align: center;
      font-size: 15px !important;
  }

</style>
